<template>
  <div class="page page-login">
    <div style="width: 50%; height: 4rem">
      <div class="login-form mb-30">
        <el-steps :active="active" simple>
          <el-step title="验证身份"></el-step>
          <el-step title="重置密码"></el-step>
          <el-step title="完成"></el-step>
        </el-steps>
      </div>
      <div class="sign-form" v-if="active == 0">
        <el-form ref="form" :model="form" label-width="0px" style="width: 50%">
          <el-form-item
            prop="phone"
            :rules="[
              { required: true, message: '请输入手机号', trigger: 'change' },
              { validator: validatePhone, trigger: 'change' },
            ]"
          >
            <el-input v-model="form.phone" placeholder="请输入手机号">
              <i slot="prefix" class="iconfont icon-phone"></i>
            </el-input>
          </el-form-item>
          <slider v-model="isLock" class="mb-20" v-if="lockShow" />
          <el-form-item
            prop="code"
            :rules="[
              { required: true, message: '请输入验证码', trigger: 'change' },
            ]"
          >
            <el-input v-model="form.code" placeholder="请输入验证码">
              <i slot="prefix" class="iconfont icon-code"></i>
              <div
                slot="append"
                @click="getCode"
                class="pointer"
                v-if="codeTime == 0"
              >
                获取验证码
              </div>
              <div slot="append" class="pointer" v-else>
                {{ codeTime }}s后重新获取
              </div>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              size="large"
              type="primary"
              class="full mb-0"
              @click="next(0)"
              >下一步</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button size="large" class="full mb-0 mt-10" @click="goBack"
              >返回登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="sign-form" v-else-if="active == 1">
        <el-form ref="form" :model="form" label-width="0px" style="width: 50%">
          <el-form-item
            prop="phone"
            :rules="[
              { required: true, message: '请输入手机号', trigger: 'change' },
              { validator: validatePhone, trigger: 'change' },
            ]"
          >
            <el-input v-model="form.phone" placeholder="请输入手机号">
              <i slot="prefix" class="iconfont icon-phone"></i>
            </el-input>
          </el-form-item>
          <el-form-item
            prop="password"
            :rules="[
              { required: true, message: '请输入密码', trigger: 'change' },
              { validator: validatePass, trigger: 'change' },
            ]"
          >
            <el-input
              v-model="form.password"
              placeholder="请输入密码"
              type="password"
            >
              <i slot="prefix" class="iconfont icon-lock"></i>
            </el-input>
          </el-form-item>
          <el-form-item
            prop="apassword"
            :rules="[{ validator: validatePass2, trigger: 'change' }]"
          >
            <el-input
              v-model="form.apassword"
              placeholder="请确认密码"
              type="password"
            >
              <i slot="prefix" class="iconfont icon-apassword"></i>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              size="large"
              type="primary"
              class="full mb-0"
              @click="next(1)"
              >下一步</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button size="large" class="full mb-0 mt-10" @click="goBack"
              >返回登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="sign-form" v-else>
        <div class="flex v-c column fs-18">
          <div
            class="el-icon-success mb-20"
            style="font-size: 0.3rem; color: "
          ></div>
          密码修改成功{{ time }}s,后跳转到登陆页面
          <el-button class="mt-30" @click="goBack">立即跳转</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Slider from "../components/slider.vue";

export default {
  components: { Slider },

  data() {
    return {
      active: 0,
      form: {},
      codeTime: 0,
      isLock: false,
      timer: null,
      time: 5,
      lockShow: false,
    };
  },
  created() {
  },
  mounted() {
    this.lockShow = true;
  },
  methods: {
    goUp() {
      this.active--;
    },
    validatePass2(rule, value, callback) {
      if (value !== this.form.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    },
    validatePass(rule, value, callback) {
      const reg =
        /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,16}$/;
      if (!reg.test(value)) {
        callback(
          new Error(
            "请输入8-16位字符,可使用大写字母,小写字母,数字或符号的至少三种组合"
          )
        );
      } else {
        callback();
      }
    },
    validatePhone(rule, value, callback) {
      const reg =
        /^((13[0-9])|(14)|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/;
      if (!reg.test(value)) {
        callback(new Error("请输入正确的手机号"));
      } else {
        callback();
      }
    },
    goBack() {
      this.$router.replace("/login");
      this.clearTimer();
    },
    clearTimer() {
      clearTimeout(this.timer);
      this.timer = null;
      this.codeTime = 0;
    },
    next(type) {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (type == 0) {
            // return;
            this.$post(
              "/systemsetup/systemsetup/identityVerification",
              this.form
            ).then(
              (res) => {
                if (res.code == 0) {
                  this.active = 1;
                }
              },
              (err) => {
                this.$message.error(err.msg);
              }
            );
          } else if (type == 1) {
            this.clearTimer();
            this.$post("/systemsetup/systemsetup/passwordReset", {
              phone: this.form.phone,
              password: this.form.password,
            }).then(
              (res) => {
                if (res.code == 0) {
                  this.active = 2;
                  const TIME_COUNT = 5;
                  if (!this.timer) {
                    this.time = TIME_COUNT;
                    this.timer = setInterval(() => {
                      if (this.time == 0) {
                        this.clearTimer();
                        this.$router.replace("/login");
                      } else {
                        this.time--;
                      }
                    }, 1000);
                  }
                }
              },
              (err) => {
                this.$message.error(err.msg);
              }
            );
          }
        }
      });
    },
    getCode() {
      if (!this.isLock) {
        this.$message.error("请先验证!");
        return;
      }
      if (!this.form.phone) {
        this.$message.error("请输入手机号!");
        return;
      }
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.codeTime = TIME_COUNT;
        this.timer = setInterval(() => {
          if (this.codeTime == 0) {
            this.clearTimer();
          } else {
            this.codeTime--;
          }
        }, 1000);
      }
      this.$post("/systemsetup/systemsetup/getVerificationCode", {
        phone: this.form.phone,
      }).then(
        (res) => {
          if (res.code == 0) {
            this.clearTimer();
          }
        },
        (err) => {
          this.clearTimer();
          this.$message.error(err.msg);
        }
      );
    },
  },
  beforeDestroy() {
    this.clearTimer();
    this.active = 0;
  },
};
</script>

<style lang="less" scoped>
/deep/.el-step__icon.is-text {
  border-radius: 50%;
  border: none;
  // border-color: inherit;
  // width: 40px;
  // height: 40px;
  font-size: 16px;
  display: none;
}
/deep/.el-steps--simple {
  background: none;
  padding: 0 !important;
}
/deep/.el-step__title.is-process {
  color: #0f71e2;
}

.sign-form {
  height: auto;
  // width: 60%;
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
  .title {
    margin-bottom: 20px;
    font-size: 24px;
    text-align: center;
    color: #fff;
  }
  .el-form-item {
    margin-bottom: 25px !important;
  }
  .el-input {
    line-height: 40px !important;
  }
  /deep/ .el-input__inner {
    height: 40px !important;
    font-size: 15px !important;
    padding-left: 55px;
  }
  .el-form-item__content {
    position: relative;
  }
  .iconfont {
    font-size: 16px;
    margin-left: 15px;
  }
}
/deep/.el-result__icon {
  width: 100px;
  color: #0f71e2;
}
</style>
